<template lang='pug'>
.addressAll
  .citys(@click="choiceCity")
    span {{beforePosition.cityName || position.cityName || '南京'}}
    i.icon
  .title 支持配送的小区
  .box(v-for="i in addressData")
    .zm {{i.spell}}
    ul.thisads
      li(v-for="v in i.poiList",@click="choice(v)")
        p {{v.poiName}}
        p.qu {{`${v.cityName}${v.distName}`}}
  citySelect(v-show="showCitySelect",v-if="citys.length !=0",v-on:closeselectCity="setCity",:adata="citys")
</template>
<script>
import { mapGetters } from 'vuex'
import fetch from '@/config/fetch'
import { setSelectedPositionCookie } from '@/config/utils'
import { poi } from '@/config/env'
import citySelect from './citySelect'
import { snxd } from '@/config/env'

export default {
    created() {
        // this.$store.dispatch('getCityList')

        this.getCitys();
        this.getAddressDate();
    },
    components: {
        citySelect,
    },
    data() {
        return {
            hasAds: false,
            loading: true,
            addressData: [],
            citys: [],
            showCitySelect: false,
        }
    },
    methods: {
        getCitys() {
            fetch({
                url: `${snxd}/city/getCitys.html`,
                params: {}
            }).then((res) => {
                this.citys = res.data[0].citys
            })
        },
        choiceCity() {
            this.showCitySelect = true;
        },
        setCity() {
            this.showCitySelect = false;
            this.getAddressDate()
        },
        async getAddressDate() {
            this.$store.commit('showMask', true)
            let cityCode = this.beforePosition.cityCode || this.position.cityCode
            var url;
            let cartLink = this.$route.query.cartLink
            if (!!cartLink) {
                url = `${poi}/cmwsmdm-web/poi/getCommunityListByCityCode_${cityCode}.html?source=wap&version=3.2.2&areaId=${this.$store.state.position.areaId}`
            } else {
                url = `${poi}/cmwsmdm-web/poi/getCommunityListByCityCode_${cityCode}.html?source=wap&version=3.2.2`
            }
            let ads = await fetch({
                url: url,
                params: {},
            })
            console.log(ads)
            if (!ads.data) {
                return
            }
            this.addressData = ads.data
            this.$store.commit('showMask', false)
            this.hasAds = true
        },
        choice(item) {
            if (item.mdmCityCode == '1000180') {
                AlertBox({
                    type: 'onceConfirm',
                    msg: '很抱歉，徐州苏鲜生暂不支持该服务'
                })
                return
            }
            let p = {
                storeLocation: item.storeLocation,
                cityName: item.cityName,
                cityCode: item.mdmCityCode,
                storeName: item.storeName,
                storeCode: item.storeCode,
                poiId: item.poiId,
                poiName: item.poiName,
                provCode: item.provCode,
                areaId: item.areaId
            }
            // setSelectedPositionCookie(p)
            // this.$store.commit('setPosition',p);
            if (this.$route.params.type == 'edit') {
                this.$store.commit('AssignBeforePosition', p);
                this.$store.commit('AssignDetailAddress', {
                    houseNumber: '',
                    pathName: '',
                });
                // this.$router.push({path:'/address/edit'})
                this.$router.go(-1)
            }
            if (this.$route.params.type == 'index') {
                setSelectedPositionCookie(p)
                this.$store.commit('setPosition', p);
                this.$router.push({ path: '/' })
            }
            if (this.$route.params.type == 'nearby') {
                setSelectedPositionCookie(p)
                this.$store.commit('setPosition', p);
                this.$store.commit('setDefaultAddress', { addressId: '' })
                this.$router.push({ path: '/' })
            }
        }
    },
    computed: {
        ...mapGetters([
            'citysArr', 'beforePosition', 'position'
        ])
    },
    watch: {
        'cityCode': 'getAddressDate'
    }
}
</script>
<style lang='scss' scoped>
@import '../tool.scss';
.addressAll {
    background-color: #fff;
    font-size: toRem(27);
    .citys {
        text-indent: 0;
        width: 100%;
        height: _(88);
        line-height: _(88);
        background-color: #fff;
        color: #333;
        text-align: center;
        font-size: _(34);
        box-shadow: 0 2px 2px 0 #e6e6e6;
        .icon {
            display: inline-block;
            margin-left: _(20);
            width: _(17);
            height: _(11);
            background-image: url('/static/images/xia.png');
            background-size: 100% 100%;
        }
    }
    .title {
        width: 100%;
        height: toRem(100);
        line-height: toRem(100);
        text-indent: toRem(44);
        color: #9c9c9c;
        border-bottom: 1px solid #ebebeb;
    }
    .box {
        text-indent: toRem(44);
        .zm {
            width: 100%;
            height: toRem(64);
            line-height: toRem(64);
            font-weight: bold;
            background-color: #ebebeb;
        }
        .thisads {
            li {
                width: 100%;
                height: toRem(156);
                padding: toRem(18) 0;
                background-color: #fff;
                border-bottom: 1px solid #ebebeb;
                line-height: toRem(60);
                p {
                    color: #343434;
                    font-size: toRem(34);
                }
                .qu {
                    color: #9c9c9c;
                    text-indent: toRem(44);
                    font-size: toRem(28);
                }
            }
        }
    }
}

.choice-city {
    border-bottom: 1px solid #ebebeb;
}
</style>